<template>
  <div>
    <h1>App</h1>
    <p>当前点击是否在 box 外 {{ isClickOutside }}</p>
    <!-- <p>是否点击在 .box1 的外层: {{ isClickOutsideByBox1 }}</p> -->

    <div class="box" ref="box" v-if="isShowBox"></div>

    <div class="box1"></div>
  </div>
</template>

<script setup>
import { watch, ref } from "vue";
import { useClickOutside } from "./hooks/useClickOutside";

const isShowBox = ref(false);
const box = ref(null);

// console.log(document.querySelector(".box"));

const isClickOutside = useClickOutside(box, (newVal) => {
  if (newVal) {
    alert(".box 点击了外层");
  } else {
    alert(".box 点击了内层");
  }
});

// const isClickOutsideByBox1 = useClickOutside(".box1");

// watch(isClickOutside, (newVal) => {
//   if (newVal) {
//     alert("点击了外层");
//   } else {
//     alert("点击了内层");
//   }
// });
</script>

<!-- <script setup>
/**
 * 需求1. 点击 .box 元素时，要得到一个 isClickOutside 返回 false
 *        点击 .box 元素之外的内容时，要得到一个 isClickOutside 返回 true

   需求2.
          根据 isClickOutside 做不同的操作
 */

// import { onBeforeUnmount, onMounted, ref } from "vue";
// /**
//  * 当前点击操作，是否是 .box 元素的外层
//  */
// const isClickOutside = ref(false);

// function handle(event) {
//   const boxDom = document.querySelector(".box");
//   if (boxDom.contains(event.target)) {
//     isClickOutside.value = false;
//   } else {
//     isClickOutside.value = true;
//   }
// }

// onMounted(() => {
//   document.addEventListener("click", handle);
// });

// onBeforeUnmount(() => {
//   document.removeEventListener("click", handle);
// });
</script> -->

<style>
.box {
  margin: 20px;
  width: 300px;
  height: 300px;
  background-color: green;
}

.box1 {
  margin: 20px;
  width: 300px;
  height: 300px;
  background-color: red;
}
</style>
